<template>
	<view class="content">
			<!-- 仪器耗材列表 -->
			<view class="plan" >
				<view class="grace-nowrap grace-flex-vcenter">
					<view class="hd-title"></view>
					<view style="font-size: 34rpx;">仪器耗材列表</view>
				</view>
				<!-- 列表展示 -->
				<view class="product" >
					<view class="product-content " v-for="item in list" :key="item.id">
						<view class="">
							<view class="product-title">序号</view>
							<view class="left-margin">
								<input class="uni-input" type="text" placeholder="请输入" v-model="item.icon" disabled="disabled"/>	
							</view>
						</view>
						<view class="">
							<view class="product-title">主键</view>
							<view class="left-margin">
								<input class="uni-input" type="text" placeholder="请输入" v-model="item.WF_OrUnid" disabled="disabled"/>
							</view>
						</view>
						<view class="">
							<view class="product-title">产品编号</view>
							<view class="left-margin">
								<input class="uni-input" type="text" placeholder="请输入" v-model="item.cInvCode" disabled="disabled"/>
							</view>
						</view>
						<view class="">
							<view class="product-title">产品名称</view>
							<view class="left-margin">
								<input class="uni-input" type="text" placeholder="请输入" v-model="item.cInvName" disabled="disabled"/>
							</view>
						</view>
						<view class="">
							<view class="product-title">规格</view>
							<view class="left-margin">
								<input class="uni-input" placeholder="请输入" type="text" v-model="item.cInvStd" disabled="disabled"/>
							</view>
						</view>
						<!-- <view class="">
							<view class="product-title">授权类型</view>
							<view class="left-margin">
								<vvSelect v-model="item.Define3" 
									placeholder="请选择"
								 :list="typeOption" valueKey="productid" ></vvSelect>
							</view>
						</view> -->
						<view class="">
							<view class="product-title">数量</view>
							<view class="left-margin">
								<input class="uni-input" type="text" placeholder="请输入" v-model="item.num"/>
							</view>
						</view>
						<view class="cancel" @click="del(item)">
							<view class="icon iconfont icon-quxiao"></view>
						</view>
					</view>
				</view>
				<view class="add grace-nowrap" @click="addproduct">
					<view class="icon iconfont icon-tianjia" style="color: #00B26A; font-size: 42rpx;"></view>
					<span style='font-size: 32rpx;'>新增</span>
				</view>
			</view>
			<!-- 选择客户窗口 -->
			<uni-drawer ref="customerChoose" mode="right" :width="300">
				<my-list-data @confirm="addCustomer"></my-list-data>
			</uni-drawer>
	</view>
</template>

<script>
	import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	import myListData from '../components/my-list-data.vue'
	import vvSelect from '@/components/vv-select/vv-select'
	export default {
		props:{
			list:{
				default: [],
				type: Array
			}
		},
		data() {
			return {
				customerList:[],
				user: {},
				typeOption:[
					{productid:'入院备案',name:'入院备案'},
					{productid:'投标',name:'投标'},
					{productid:'短期推广',name:'短期推广'},
					{productid:'收款',name:'收款'},
					{productid:'特殊招标',name:'特殊招标'},
					{productid:'其他授权',name:'其他授权'},
					]
			}
		},
		components: {
			uniDrawer,
			uniSearchBar,
			myListData,
			vvSelect
		},
		computed: {
			i18n() {
				return this.$t('form')
			}
		},
		onLoad(opt) {
		},
		methods: {
			//添加产品
			addproduct() {
				this.$refs.customerChoose.open()
				// this.$emit('reload')
			},
			del(item){
				let index = this.list.indexOf(item)
				let list = this.list.splice(index,1)
				console.log(list)
				this.$emit('reload')
			},
			addCustomer(item){
				this.$refs.customerChoose.close()
				this.list.push({
					icon: item.icon,
					WF_OrUnid: item.WF_OrUnid,
					cInvCode: item.cInvCode,
					cInvName: item.cCusName,
					cInvStd: item.cInvStd,
					num: item.num
				})
				console.log(item)
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "@/common/css/style.css";
	@import "@/common/css/icons.css";
	.grace-nowrap{display:flex; flex-direction:row; flex-wrap:nowrap;}
	.grace-flex-vcenter{align-items:center;}
	.cancel{
		color: #d10000;
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		.icon{
			font-size: 42rpx;
		}
	}
	.hd-title{
		width: 10rpx;height: 30rpx;background-color: #00B26A;margin-right: 5px;
	}
	.product {
		margin-top: 30rpx;
		font-size: 32rpx;
	}
	
	.product-content {
		position: relative;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 30rpx;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		background-color: rgba(0, 167, 60, 0.19);
		line-height: 60rpx;
	}
	
	.product-title {
		font-weight: 500;
	}
	
	.left-margin {
		margin-left: 50rpx;
		color: #C0C0C0;
	}
	
	.content {
		
		font-size: 26rpx;
		font-weight: 500;
	}
	
	.plan {
		padding: 30rpx;
		background-color: #FFFFFF;
	}
	
	.add {
		padding: 20rpx;
	}
	.scroll-wrap{
		height: 500px;
		background: #eee;
	}
	
</style>
